import i18n from '~/locales'
import { themeStoreAtom } from '~/store'
import { useAtomValue } from 'jotai'
import { useTranslation } from 'react-i18next'

export const SocialContacts = ({ className = '', showContactForm = true }) => {
  const isRus = i18n.language === 'ru'

  const { themeDark } = useAtomValue(themeStoreAtom)
  const isDark = themeDark()

  const contactUrl = `${
    import.meta.env.VITE_CONTACT_SERVER_URL
  }/contact/?source=app&locale=${i18n.language}&dark=${isDark ? 'true' : 'false'}`

  const { t } = useTranslation()
  return (
    <div className={`flex flex-wrap gap-4 justify-center items-center ${className}`}>
      {isRus ? (
        <div className="flex justify-center">
          <a
            href="https://t.me/pastebar_ru"
            target="_blank"
            title="Telegram"
            className="inline-flex flex-col justify-center items-center p-1 rounded-md hover:bg-blue-600 dark:hover:bg-blue-600 hover:text-white"
          >
            <span className="w-7 h-7">
              <svg
                fill="currentColor"
                viewBox="0 0 32 32"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M 26.070313 3.996094 C 25.734375 4.011719 25.417969 4.109375 25.136719 4.21875 L 25.132813 4.21875 C 24.847656 4.332031 23.492188 4.902344 21.433594 5.765625 C 19.375 6.632813 16.703125 7.757813 14.050781 8.875 C 8.753906 11.105469 3.546875 13.300781 3.546875 13.300781 L 3.609375 13.277344 C 3.609375 13.277344 3.25 13.394531 2.875 13.652344 C 2.683594 13.777344 2.472656 13.949219 2.289063 14.21875 C 2.105469 14.488281 1.957031 14.902344 2.011719 15.328125 C 2.101563 16.050781 2.570313 16.484375 2.90625 16.722656 C 3.246094 16.964844 3.570313 17.078125 3.570313 17.078125 L 3.578125 17.078125 L 8.460938 18.722656 C 8.679688 19.425781 9.949219 23.597656 10.253906 24.558594 C 10.433594 25.132813 10.609375 25.492188 10.828125 25.765625 C 10.933594 25.90625 11.058594 26.023438 11.207031 26.117188 C 11.265625 26.152344 11.328125 26.179688 11.390625 26.203125 C 11.410156 26.214844 11.429688 26.21875 11.453125 26.222656 L 11.402344 26.210938 C 11.417969 26.214844 11.429688 26.226563 11.441406 26.230469 C 11.480469 26.242188 11.507813 26.246094 11.558594 26.253906 C 12.332031 26.488281 12.953125 26.007813 12.953125 26.007813 L 12.988281 25.980469 L 15.871094 23.355469 L 20.703125 27.0625 L 20.8125 27.109375 C 21.820313 27.550781 22.839844 27.304688 23.378906 26.871094 C 23.921875 26.433594 24.132813 25.875 24.132813 25.875 L 24.167969 25.785156 L 27.902344 6.65625 C 28.007813 6.183594 28.035156 5.742188 27.917969 5.3125 C 27.800781 4.882813 27.5 4.480469 27.136719 4.265625 C 26.769531 4.046875 26.40625 3.980469 26.070313 3.996094 Z M 25.96875 6.046875 C 25.964844 6.109375 25.976563 6.101563 25.949219 6.222656 L 25.949219 6.234375 L 22.25 25.164063 C 22.234375 25.191406 22.207031 25.25 22.132813 25.308594 C 22.054688 25.371094 21.992188 25.410156 21.667969 25.28125 L 15.757813 20.75 L 12.1875 24.003906 L 12.9375 19.214844 C 12.9375 19.214844 22.195313 10.585938 22.59375 10.214844 C 22.992188 9.84375 22.859375 9.765625 22.859375 9.765625 C 22.886719 9.3125 22.257813 9.632813 22.257813 9.632813 L 10.082031 17.175781 L 10.078125 17.15625 L 4.242188 15.191406 L 4.242188 15.1875 C 4.238281 15.1875 4.230469 15.183594 4.226563 15.183594 C 4.230469 15.183594 4.257813 15.171875 4.257813 15.171875 L 4.289063 15.15625 L 4.320313 15.144531 C 4.320313 15.144531 9.53125 12.949219 14.828125 10.71875 C 17.480469 9.601563 20.152344 8.476563 22.207031 7.609375 C 24.261719 6.746094 25.78125 6.113281 25.867188 6.078125 C 25.949219 6.046875 25.910156 6.046875 25.96875 6.046875 Z" />
              </svg>
            </span>
          </a>
        </div>
      ) : (
        <div className="flex justify-center">
          <a
            href="https://discord.gg/RW27D63bZ3"
            target="_blank"
            title="Discord"
            className="inline-flex flex-col justify-center items-center p-1 rounded-md hover:bg-blue-600 dark:hover:bg-blue-600 hover:text-white"
          >
            <span className="w-7 h-7">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 192 192">
                <path
                  stroke="currentColor"
                  strokeWidth="12"
                  d="m68 138-8 16c-10.19-4.246-20.742-8.492-31.96-15.8-3.912-2.549-6.284-6.88-6.378-11.548-.488-23.964 5.134-48.056 19.369-73.528 1.863-3.334 4.967-5.778 8.567-7.056C58.186 43.02 64.016 40.664 74 39l6 11s6-2 16-2 16 2 16 2l6-11c9.984 1.664 15.814 4.02 24.402 7.068 3.6 1.278 6.704 3.722 8.567 7.056 14.235 25.472 19.857 49.564 19.37 73.528-.095 4.668-2.467 8.999-6.379 11.548-11.218 7.308-21.769 11.554-31.96 15.8l-8-16m-68-8s20 10 40 10 40-10 40-10"
                />
                <ellipse cx="71" cy="101" fill="currentColor" rx="13" ry="15" />
                <ellipse cx="121" cy="101" fill="currentColor" rx="13" ry="15" />
              </svg>
            </span>
          </a>
        </div>
      )}
      <div className="flex justify-center">
        <a
          href="https://www.facebook.com/PasteBarApp"
          target="_blank"
          title="Facebook"
          className="inline-flex flex-col justify-center items-center p-1 rounded-md hover:bg-blue-600 dark:hover:bg-blue-600 hover:text-white"
        >
          <span className="w-7 h-7">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM12 21V13.0001M12 13.0001V10.0001C12 8.02404 13.3537 7.03622 15.5 7.18462M12 13.0001L15 13.0001M12 13.0001H9"
                stroke="currentColor"
                strokeWidth="1.5"
              />
            </svg>
          </span>
        </a>
      </div>
      <div className="flex justify-center">
        <a
          href="https://twitter.com/PasteBar_App"
          target="_blank"
          title="Twitter"
          className="inline-flex flex-col justify-center items-center p-1 rounded-md hover:bg-blue-600 dark:hover:bg-blue-600 hover:text-white"
        >
          <span className="w-7 h-7">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M3.50003 4.50005C1.50012 7.99982 2.63692 13.738 7.63684 16.2382C6.52918 17.0001 4.50012 17.9999 2.50012 18.4998C7.00012 20.4999 11.5001 20.9999 16.0001 17.4999C19.4154 14.8436 20.1668 10.1666 20.0001 7.99991L22.5001 5.00023H19.0001C17.5001 3.49991 16.022 3.57155 14.5001 4.00017C12.724 4.50037 11.7934 6.34309 12.0001 8.49991C9.00012 8.99968 6.00012 6.99982 3.50003 4.50005Z"
                stroke="currentColor"
                strokeWidth="1.5"
              />
            </svg>
          </span>
        </a>
      </div>
      <div className="flex justify-center">
        <a
          href="https://github.com/PasteBar"
          target="_blank"
          title="GitHub"
          className="inline-flex flex-col justify-center items-center p-1.5 rounded-md hover:bg-blue-600 dark:hover:bg-blue-600 hover:text-white"
        >
          <span className="w-6 h-6">
            <svg
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
            >
              <path d="M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm3.163 21.783h-.093a.513.513 0 0 1-.382-.14.513.513 0 0 1-.14-.372v-1.406c.006-.467.01-.94.01-1.416a3.693 3.693 0 0 0-.151-1.028 1.832 1.832 0 0 0-.542-.875 8.014 8.014 0 0 0 2.038-.471 4.051 4.051 0 0 0 1.466-.964c.407-.427.71-.943.885-1.506a6.77 6.77 0 0 0 .3-2.13 4.138 4.138 0 0 0-.26-1.476 3.892 3.892 0 0 0-.795-1.284 2.81 2.81 0 0 0 .162-.582c.033-.2.05-.402.05-.604 0-.26-.03-.52-.09-.773a5.309 5.309 0 0 0-.221-.763.293.293 0 0 0-.111-.02h-.11c-.23.002-.456.04-.674.111a5.34 5.34 0 0 0-.703.26 6.503 6.503 0 0 0-.661.343c-.215.127-.405.249-.573.362a9.578 9.578 0 0 0-5.143 0 13.507 13.507 0 0 0-.572-.362 6.022 6.022 0 0 0-.672-.342 4.516 4.516 0 0 0-.705-.261 2.203 2.203 0 0 0-.662-.111h-.11a.29.29 0 0 0-.11.02 5.844 5.844 0 0 0-.23.763c-.054.254-.08.513-.081.773 0 .202.017.404.051.604.033.199.086.394.16.582A3.888 3.888 0 0 0 5.702 10a4.142 4.142 0 0 0-.263 1.476 6.871 6.871 0 0 0 .292 2.12c.181.563.483 1.08.884 1.516.415.422.915.75 1.466.964.653.25 1.337.41 2.033.476a1.828 1.828 0 0 0-.452.633 2.99 2.99 0 0 0-.2.744 2.754 2.754 0 0 1-1.175.27 1.788 1.788 0 0 1-1.065-.3 2.904 2.904 0 0 1-.752-.824 3.1 3.1 0 0 0-.292-.382 2.693 2.693 0 0 0-.372-.343 1.841 1.841 0 0 0-.432-.24 1.2 1.2 0 0 0-.481-.101c-.04.001-.08.005-.12.01a.649.649 0 0 0-.162.02.408.408 0 0 0-.13.06.116.116 0 0 0-.06.1.33.33 0 0 0 .14.242c.093.074.17.131.232.171l.03.021c.133.103.261.214.382.333.112.098.213.209.3.33.09.119.168.246.231.381.073.134.15.288.231.463.188.474.522.875.954 1.145.453.243.961.364 1.476.351.174 0 .349-.01.522-.03.172-.028.343-.057.515-.091v1.743a.5.5 0 0 1-.533.521h-.062a10.286 10.286 0 1 1 6.324 0v.005z" />
            </svg>
          </span>
        </a>
      </div>
      {showContactForm && (
        <div className="flex justify-center">
          <a
            href={contactUrl}
            target="_blank"
            title={t('Contact Form', { ns: 'common' })}
            className="inline-flex flex-col justify-center items-center p-1 rounded-md hover:bg-blue-600 dark:hover:bg-blue-600 hover:text-white"
          >
            <span className="w-7 h-7">
              <svg fill="currentColor" viewBox="0 0 32 32">
                <path d="M26.2 8.5C24 5.3 20.6 3.3 16.9 3H16c-3.7 0-7.2 1.6-9.7 4.3-2.5 2.7-3.6 6.4-3.2 10.1.7 6 5.5 10.8 11.5 11.4.4.2.9.2 1.4.2 2.6 0 5-.7 7.2-2.2.5-.3.6-.9.3-1.4-.3-.5-.9-.6-1.4-.3-2.2 1.4-4.7 2.1-7.3 1.8-5.1-.5-9.1-4.6-9.7-9.7-.4-3.1.6-6.2 2.7-8.5 2.3-2.5 5.6-3.9 9-3.6 3.2.2 6 1.9 7.8 4.6 1.9 2.9 2.4 6.3 1.3 9.6v.1c-.3 1-1.3 1.7-2.4 1.7-1.4 0-2.5-1.1-2.5-2.5V11c0-.6-.4-1-1-1s-1 .4-1 1c-.8-.6-1.9-1-3-1-2.8 0-5 2.2-5 5v2c0 2.8 2.2 5 5 5 1.4 0 2.6-.6 3.5-1.4.7 1.4 2.2 2.4 4 2.4 1.9 0 3.6-1.2 4.3-3.1v-.1c1.3-3.8.7-7.9-1.6-11.3zM19 17c0 1.7-1.3 3-3 3s-3-1.3-3-3v-2c0-1.7 1.3-3 3-3s3 1.3 3 3v2z" />
              </svg>
            </span>
          </a>
        </div>
      )}
    </div>
  )
}
